import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Card, CardContent } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { ArrowLeft, Volume2 } from 'lucide-react'

const WeeklyTest = () => {
  const navigate = useNavigate()
  const [currentQuestion, setCurrentQuestion] = useState(0)
  const [selectedAnswer, setSelectedAnswer] = useState(null)
  const [showResult, setShowResult] = useState(false)
  const [isCorrect, setIsCorrect] = useState(false)

  // 示例题目数据
  const questions = [
    {
      id: 1,
      question: 'What did Mark do yesterday?',
      hasAudio: true,
      options: [
        { id: 'A', text: 'He went to the library' },
        { id: 'B', text: 'He played tennis' },
        { id: 'C', text: 'He studied math' },
        { id: 'D', text: 'He visited his uncle' }
      ],
      correctAnswer: 'B'
    },
    {
      id: 2,
      question: 'Choose the correct spelling:',
      hasAudio: false,
      options: [
        { id: 'A', text: 'necesary' },
        { id: 'B', text: 'necessary' },
        { id: 'C', text: 'neccessary' },
        { id: 'D', text: 'necessery' }
      ],
      correctAnswer: 'B'
    }
  ]

  const currentQ = questions[currentQuestion]

  const playAudio = () => {
    console.log('Playing question audio')
  }

  const selectAnswer = (optionId) => {
    setSelectedAnswer(optionId)
  }

  const submitAnswer = () => {
    const correct = selectedAnswer === currentQ.correctAnswer
    setIsCorrect(correct)
    setShowResult(true)
  }

  const nextQuestion = () => {
    if (currentQuestion < questions.length - 1) {
      setCurrentQuestion(prev => prev + 1)
      setSelectedAnswer(null)
      setShowResult(false)
    } else {
      // 测试完成，跳转到报告页面
      navigate('/weekly-report')
    }
  }

  return (
    <div className="min-h-screen p-4">
      {/* Header */}
      <div className="flex items-center mb-6">
        <Button
          variant="ghost"
          size="icon"
          onClick={() => navigate('/')}
          className="mr-4"
        >
          <ArrowLeft size={24} />
        </Button>
        <h1 className="text-2xl font-bold text-gray-800">Weekly English Test</h1>
      </div>

      {/* Question Card */}
      <Card className="bg-white/90 backdrop-blur-sm">
        <CardContent className="p-6">
          {/* Question Number */}
          <div className="mb-6">
            <h2 className="text-xl font-bold text-gray-800">
              Question {currentQuestion + 1}
            </h2>
          </div>

          {/* Question Text */}
          <div className="mb-6">
            <div className="flex items-center gap-3 mb-4">
              {currentQ.hasAudio && (
                <Button
                  onClick={playAudio}
                  size="sm"
                  className="bg-gray-700 hover:bg-gray-800 text-white"
                >
                  <Volume2 size={20} />
                </Button>
              )}
              <p className="text-lg text-gray-800">{currentQ.question}</p>
            </div>
          </div>

          {/* Answer Options */}
          <div className="space-y-3 mb-6">
            {currentQ.options.map((option) => (
              <Button
                key={option.id}
                onClick={() => selectAnswer(option.id)}
                variant="outline"
                className={`w-full p-4 text-left justify-start h-auto ${
                  selectedAnswer === option.id
                    ? showResult
                      ? option.id === currentQ.correctAnswer
                        ? 'bg-green-100 border-green-500 text-green-800'
                        : 'bg-red-100 border-red-500 text-red-800'
                      : 'bg-blue-100 border-blue-500 text-blue-800'
                    : showResult && option.id === currentQ.correctAnswer
                    ? 'bg-green-100 border-green-500 text-green-800'
                    : 'hover:bg-gray-50'
                }`}
              >
                <span className="font-semibold mr-3">{option.id}.</span>
                {option.text}
              </Button>
            ))}
          </div>

          {/* Result Display */}
          {showResult && (
            <div className="text-center mb-6">
              <p className={`text-2xl font-bold ${isCorrect ? 'text-green-600' : 'text-red-600'}`}>
                {isCorrect ? 'Correct!' : 'Incorrect!'}
              </p>
              {!isCorrect && (
                <p className="text-gray-600 mt-2">
                  The correct answer is {currentQ.correctAnswer}.
                </p>
              )}
            </div>
          )}

          {/* Action Buttons */}
          <div className="flex justify-center gap-4">
            {!showResult ? (
              <>
                <Button 
                  onClick={submitAnswer}
                  disabled={!selectedAnswer}
                  className="bg-blue-500 hover:bg-blue-600 text-white px-8 py-3 rounded-xl"
                >
                  SUBMIT
                </Button>
              </>
            ) : (
              <>
                <Button 
                  onClick={nextQuestion}
                  className="bg-blue-500 hover:bg-blue-600 text-white px-8 py-3 rounded-xl"
                >
                  {currentQuestion < questions.length - 1 ? 'Next Question' : 'View Report'}
                </Button>
              </>
            )}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}

export default WeeklyTest

